<template>
  <div class="logging" v-if="isShow">
    <div class="content">
      <div>用户名<input type="text" id="username" /></div>
      <div>密 码<input type="password" id="password" /></div>
      <button @click="logging">登录</button>
    </div>
    <close-button @closeClick="closeClick" class="close"></close-button>
  </div>
</template>

<script>
import CloseButton from "../Close/CloseButton.vue";
export default {
  components: { CloseButton },
  methods: {
    closeClick() {
      this.isShow = false;
    }
  }
};
</script>

<style scoped>
.logging {
  background-color: var(--color-tint);
  color: #fff;
  width: 230px;
  height: 180px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
input {
  width: 170px;
}
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
button {
  display: block;
  width: 40px;
  height: 40px;
  font-size: 10px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: #fff;
  border-radius: 50%;

  border: 5px solid rgb(255, 230, 230);
  margin-top: 10px;
}

.close {
  position: absolute;
  right: 10px;
  top: 3px;
}
</style>
